<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3基础</title>
    <style>
        h3{
            color: #33CC00;
        }
        h4{
            color: rgb(20, 0, 204);
        }
        
        .transform_test:hover img{
		    opacity:1;
            transform:translate(0px,0px);
            -webkit-transform:translate(0px,0px);

		    transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
		    -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
        }


    </style>
</head>

<body>
   <h4> 过渡属性 transition-property </h4>
    
	<p> 平滑地以动画效果改变CSS的属性值 </p>
	<p> transform-origin取值和元素设置背景中的background-position取值类似</p>
	<p></p>
	<p></p>
	<p></p>

	<a class="transform_test" style="display:block;width:300px;height:300px;
		background: #000  url(images/moon.png) no-repeat center;
		background-size:cover;
		">
		<img src="images/change.png" 
			style="width:150px;height:150px;
				display:block;
				opacity:0.5;

				transform:translate(-100px,-100px);
				-webkit-transform:translate(-100px,-100px);

				transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
				-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
				" ></img>
	</a>

</body>

</html>